<template>
  <div class="allOrderBox">
    <h3>全部订单</h3>
    <div class="order-head">
      <span>编号</span>
      <span>订单名</span>
      <span>订单金额</span>
      <span>订单状态</span>
    </div>
    <ul class="order-content">
      <li v-for="(item, index) in list" :key="item.id" class="order-item">
        <span class="order-item-one">{{ index + 1 }}</span>
        <span>{{ item.name }}</span>
        <span class="order-item-three">￥{{ item.amount }}</span>
        <span class="order-item-four">{{ item.orderStatus }}</span>
      </li>
    </ul>
    <!-- 分页功能 -->
  </div>
</template>

<script>
import { getAllorder } from "@/service/mineService";
export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    async getAllorderList() {
      const { data } = await getAllorder();
      if (data.code !== 200) return this.$toast(data.msg);
      if (data.rows.length === 0) {
        //模拟后端数据
        this.list = [
          {
            id: 21,
            orderNo: "2021051001061885288",
            amount: 58,
            orderStatus: "已付款",
            userId: 2,
            payTime: "2021-05-10",
            name: "中影话臣影城",
            orderTypeName: "看电影",
          },
        ];
      } else {
        this.list = data.rows;
      }
    },
  },
  created() {
    this.getAllorderList();
  },
};
</script>

<style lang="scss" scoped>
.allOrderBox {
  width: 300px;
  height: 500px;
  background: #fff;
  color: #333;
  .van-form {
    margin-top: 80px;
  }
  h3 {
    margin-top: 30px;
    height: 30px;
    font-size: 24px;
    line-height: 30px;
    font-weight: 800;
    color: #333;
    text-align: center;
  }
  .order-head {
    margin-top: 20px;
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .order-content {
    padding-left: 10px;
    padding-right: 10px;
    li {
      height: 30px;
      line-height: 30px;
    }
    .order-item {
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      span {
        display: block;
        text-align: center;
        width: 30%;
      }
      .order-item-one {
        width: 5%;
      }
      .order-item-three {
        width: 20%;
      }
      .order-item-four {
        width: 20%;
      }
    }
  }
}
</style>
